let path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const { CleanWebpackPlugin } =require('clean-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports={
    mode:'development',
    entry:{// 入口文件,   
        app: path.resolve(__dirname,'../../src/h5/project/todo/index.js'), 
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'../../dist/')
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/i,
                exclude: /(node_modules|bower_components)/,
                use:{
                    loader:'babel-loader?cacheDirectory',// 缓存每次的解析结果 加载更快
                    options:{
                        "presets": [
                            "@babel/preset-env"
                        ],
                        "plugins": [
                          ["transform-react-jsx", { "pragma":"h" }]
                        ]
                    }
                }
            },
            {
                test:/\.(css|less)$/i,
                use:['style-loader','css-loader', 'less-loader']
            },
            {
                test:/\.(jpg|png)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        publicPath:'./',
                        limit:4*1024,
                    }
                }
            }
        ]
    },
    devtool: 'cheap-module-source-map',
    devServer: {
        compress: true,//是否启用gzip压缩
        port: 8800//提供访问的端口
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'../../src/h5/index.html'),//查找模板文件
        }),
        new CleanWebpackPlugin(),   //清空dist目录下的文件
        new OptimizeCssAssetsWebpackPlugin() //压缩css
    ],
    optimization: {
        minimize: true, // 开始最小化
        minimizer: [new TerserWebpackPlugin()],
        splitChunks: {
            cacheGroups: {
                vender: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'all'
                },
                commons: {
                    name: 'commons',
                    chunks: 'initial',
                    minChunks: 2
                }
            }
          }
    },
    resolve: {
        alias: {
          "@h5": path.resolve(__dirname, '../../src/h5/'),
          "@static": path.resolve(__dirname, '../../static/css/'),
          "@project": path.resolve(__dirname, '../../project'),
          "@libs": path.resolve(__dirname, '../../libs'),
          "@store": path.resolve(__dirname, '../../store')
        },
        extensions: ['.js', '.jsx', '.json'], // 指定扩展名
    }
}
